사이드 프로젝트 회고

디프만이라는 사이드 프로젝트 동아리에서 11기 프론트엔드로 참여했다. 반년간의 11기가 끝나고도 개발을 이어서 조금 했지만, 일단은 멈추는걸로 되었다. 끝난지는 좀 지났지만 회고를 해본다.

디프만

사이드 프로젝트 내용을 설명하기전에 디프만은 무엇인가하면, 사이드 프로젝트를 같이 할 사람들이 모여서 하는 그런 동아리다. 이름은 "디자이너와 프로그래머가 만났을 때" 의 줄임말 이었던 것 같다. 11기에서는 약 100명 정도의 인원으로 팀당 약 10명, 10팀으로 진행된다. 대학생 부터 개발을 오래하신 분들까지 다양하게 분포시켜 준다. 꽤 재밌으니 추천한다.

프로젝트

팀이 정해지면 프로젝트 아이디어를 정하는데, 여러가지 안 중 여러 웹툰 사이트의 웹툰의 점수를 주식처럼 예측하는 커뮤니티 같은 아이디어가 나왔다. 솔직히 좋다 생각했다, 왓챠나 비슷한 서비스들이 있었지만, 웹툰의 점수를 주식같이 예측할 수 있는게 재밌지 않을까 싶었다. 후술 하겠지만 생각보다 쉽지 않았다.

프로젝트 이름은 개미는 툰툰(antoon), 블로그의 썸네일이 마스코드다.

팀

팀이름은 "디프만 1번 출구", 총 10명의 팀 중에서 디자이너 3, 백엔드 4, 프론트 3 이었다. 다들 너무 사람도 좋고 실력도 좋아서 배울게 많았다.

디자인

기획이라는 것을 어떻게 해야하는지 제대로 보여주셨다. 거의 실시간으로 기획을 하면서 디자인을 짜시는 정도의 퍼포먼스를 보았다... 따라가지를 못 했다...

IA도 피그마에 만들어주셔서 팀들이 같이 이야기하며 우선순위를 정했다.

디자인 시스템도 아래와 같이 꼼꼼하셨다.

심미적인 디자인을 넘어서 거의 프로젝트의 아이덴티티 까지 디자인하셨다. 마케팅 관점이나 개발적으로 디자인 시스템도 이해를 잘 해주셔서 많이 배웠다. 그리고 피그마 작업을 어깨너머로 많이 배웠다...

비핸스 링크를 남겨둔다. 굉장하다. (비핸스는 디자인 버전 깃헙 같은 곳 같다) https://www.behance.net/gallery/147262623/-ANTOON-l-Webtoon-Community-Service?tracking_source=search_projects%7C%EA%B0%9C%EB%AF%B8%EB%8A%94+%ED%88%B0%ED%88%B0

백엔드

스택은 자바/스프링이었다. 잘 모르지만 팀원분들의 풀리퀘 조금씩 보면서 눈여겨 봤다. 인프라를 구성시에는 나도 좀 도왔다. Amazon EC2, Amazon RDS, AWS CodeDeploy 이었는데, 환경 분리 작업을 도왔지만, 결국 못 했다. 하나의 인스턴스 안에서 두개를 띄우는 것은 무리가 있었다. 두개의 인스턴스를 사용할 수도 있었지만, 프리티어로 해결하려는 것도 있었고 우선순위가 밀려 해내지는 못하게 된다.

프로젝트의 내용처럼 여러 웹툰 사이트의 정보를 모으는 작업이 필요해서 배치작업이 있었는데, 이것이 너무 무거워서 인스턴스의 메모리를 넘쳐버리는 일이 종종 생기고 말았다. 뿐만 아니라 영향으로 쿼리들의 속도도 너무 느려지는 문제가 발생한다. 그래서 대책을 찾다가 Google Cloud(GCP)의 Cloud Run을 찾게된다.

AWS App Runner도 고려했지만, 아직 한국 리전을 지원하지 않았고, 0 to 1 scale이 가능하지 않아 결국 Cloud Run을 사용하게 된다. 생각보다 쉽게 마이그레이션 되었고, 기존의 AWS에 있던 인스턴스는 레디스와 배치만 돌아가는 형태가 되었다. 사실 배치도 분리하고 싶었는데 프로젝트가 점점 끝나가는 형태가 되기도 하고, 프론트 작업 시간이 너무 줄어서 멈추게 된다.

인프라에 대해 많이 배우고 자바/스프링에 대한 것도 많이 배워갔던 것 같다. 특히 Cloud Run을 알게 된건 너무 좋은 경험이다. 앞으로도 쓸 것 같다. 그리고 자바/스프링도 관심이 생겨서 공부를 조금 했다.

https://github.com/depromeet/todo-list-study/pull/8

같이 했던 팀원이 자바/스프링 클린 코드를 투두 리스토로 만들어보면서 리뷰해주는 레포를 만들어주었어서 최근 해보았다. 되게 재밌었다. 자바/스프링을 조금 이해할 수 있게 되었다. 앞으로도 팀원이 자바/스프링을 사용하게 된다면 같이 참여해보고 싶다.

프론트

처음으로 Next.js를 사용해보았다. 커뮤니티 성격이 있다보니 SEO도 영향이 있을 것 같아서 SSR을 고려하였는데, 한분은 vue.js를 사용하시던 분이었고 나는 React.js만 다행이 한분이 Next.js 경험이 있어서 Next.js를 하게된다.

Next.js를 선택하면서 라이브러리 스택도 선택하게 되는데 각자 선호하는, 사용하고 싶은 라이브러리를 추려서 아래와 같은 스택이 되었다.

프론트 인프라를 vercel로 하려다 깃헙 오게니제이션에서 사용하면 유료 플랜을 사용해야 하는 제약 혹은 무료 플랜을 사용하더라도 하루 100번 배포 제한으로 저번 프로젝트에서 문제가 있었다는 팀원의 의견으로 내가 인프라를 구성하게된다. AWS 위에 Amazon CloudFront와 AWS Lambda@Edge를 사용하는데, Serverless Framework에서 컴포넌트가 있어서 쉽게 구성하였다. 환경분리도 dev/stg/prd로 분리해서 편하게 사용했다.

SSR 환경에서 처음으로 해보는 거라 뭔가 될 것 같은 것도 무언가 안된다거나 (렌더링, 쿠키, 스트로지, 에러 처리 등등) Next.js의 사용법도 몰라 처음에는 시간이 많이 걸린것 같다. 하지만, 개발 경험은 매우 좋았고 앞으로도 계속 쓰고 싶다. 그런데 최근 13버전으로 올라가면서 이것저것 바뀐 것 같아, 좀 봐야겠다.

리액트 쿼리를 처음 사용하게 되는데, 편리했다. 이전에는 리덕스에다가 넣어두고 갖다 쓰는 방식을 하다가 엄청나게 쉬워진 느낌이 들었다. 구현보다 문서를 읽고 좋은 방법을 찾는 게 필요했다. 다른 팀원들이 구성도 봐가면서 적용했는데 매우 좋은 경험이었다.

스토리북도 처음 써보게 되는데 사실 제대로 못 썼다. 중간중간 에러가 생기거나 할 때 대응 우선순위가 밀리게되고, 디자이너 분들이 디자인 시스템을 만들어줬는데 일단 페이지 구현을 우선시 해버려서 뭔가 돌아갈 수 없는 강을 건넌 것 처럼 점점 다들 쉬쉬하게되었다... 크로마틱도 사용했는데, 디자이너 팀과 같이 사용하면 좋았을 텐데 다들 바뻐서 먼가 타이밍이 안맞았다. 그래도, 쓸 것 같다. 나쁘지 않다.

모니터링도 센트리, GA, Mixpanel, Hotjar를 도입했다. 근데 막상 제대로 못 썼다. 센트리는 슬랙에 연결해서 그래도 잘 사용했지만 다른 유저 모니터링 툴들은 수집은 해도 제대로 사용하지 못 했다. 디자이너 분들이 액션을 정의해주셨는데 amplitude 방식으로 정의해주셔서 안될 것 같다 했는데, 지금 생각해보면 그냥 내가 컨벤션 변경하는 스크립트 하나 짜거나 알아서 잘 처리했으면 더 좋았을 것 같다.... (죄송스러운 ?)

프로젝트 후반부에 어플로도 하자는 의견이 나와 내가 React Native을 하게된다. 아이폰을 사용하는 팀원이 많아 아이폰을 하고 싶었는데, 아이폰 같은 경우 웹뷰를 사용하면서 아이폰 로그인이 없으면 힘들다는 의견이 많아 안드로이드를 먼저 하게된다. 생각보다 간단했고, 중간에 구글 로그인 에러 처리도 하고 심사도 받아보고 경험이 되었다.

작업했던 레포 링크들이다. 운 좋게 스타를 많이 받았는데 기분이 좋다.

웹 https://github.com/depromeet/antoon-web

앱 https://github.com/depromeet/antoon-app

아쉬었던 점

후술하겠다 하던 프로젝트 테마 선택이다. 웹툰, 커뮤니티 그리고 주식이라는 성격을 가진 프로젝트인데 이게 쉽지 않았다. 왓챠라던지 비슷한 서비스들이 있지만, 그림에 대한 저작권을 제대로 알지 못하면서 어디까지 사용해도 되고 어디까지 사용하면 안되는지 알지 못하는 부분이나, 주요 데이터를 외부에 의존하는 부담이 있었고, 고려해야 할게 기획 초기보다 많았다.

또한 짧은 시간에 너무 많은 범위를 구현하려 했다. 팀원분들이 다들 아이디어도 많고 실력도 좋아서 많이 구현하려다 보니 시간이 지날수록 복잡해지면서 구현 시간이 점점 걸리고 버그도 생기고 문제가 계속 생겼다. 좀 더 범위를 줄여 퀄리티를 높이는 것도 좋았을 것 같다...

좋았던 점

정말 많은 경험을 얻었다. 개발에 대한 좋은 경험도 얻었지만, 좋은 사람들과 많은 시간을 지냈다.

이 프로젝트 이전에도 사이드 프로젝트를 몇 번 해봤는데, 중간에 엎어지거나, 팀원이 탈주하거나, 퀄리티가 부족하거나 등등등... 많은 일들이 있었지만, 이번 팀은 오히려 내가 너무 부족해서 아쉬운 다들 훌륭하신 분들이었다.

개발적으로도 많은 스택과 경험을 얻어갔고, 프론트에서 여러가지 스택을 써본 것, 백엔드 인프라 구성 등등등...

근데 가장 얻은 것중 귀중하다 생각한 건 좋은 사람들과 프로젝트 하는게 얼마나 즐거운지다. 정말 "몰입"이라는 것을 한 것 같다. 일이 끝나고 피곤하더라도 좀 더 좋게 구현하고 싶어서 공부를 더 한다던지 조사한다던지 지금 생각하면 어떻게 했는지 신기하다. 또, 사람에 대한 관계 또한 조금 더 성숙해졌다. 프로젝트를 하다보면 서로 의견 충돌이나 오해가 생길 수 밖에 없다 생각하는데 이런 부분에 대해 좀 더 유연한 사고를 할 수 있게 되었다.

그리고 최종발표에서 우수상을 탄 것도 기쁜 경험이다. ?

앞으로

앞으로도 이런 사이드 프로젝트 동아리들을 다양하게 접하고 싶다. 그리고 여기서 만난 다른 팀원들과의 스터디도 계속하고 있는데 매우 공부가 되고 있다.

다들 사이드 프로젝트를 하는 이유를 알 것 같다. 좀 더 자주 해야겠다.